<template>
  <div>
    <div style="padding: 10px 0">
      <el-form ref="form" :inline="true" :model="form">
        <el-form-item
          label="表名:"
          prop="_tableName_"
          :rules="commonRules(importanceOptions)"
          class="common_Style"
        >
          <myElAutocomplete
            :form="form"
            attributeName="_tableName_"
            :seleteLists="importanceOptions"
            valuekey="Label_Desc"
            @inputEvent="handleBASICstrparam"
            placeholder="请选择表名"
          />
        </el-form-item>
        <el-form-item
          label="组件名:"
          prop="componentName"
          :rules="[
            { required: true, message: '请输入组件名', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model.trim="form.componentName"
            clearable
            placeholder="请输入组件名"
          />
        </el-form-item>
        <el-form-item
          label="组件英文名:"
          prop="enName"
          :rules="[
            { required: true, message: '请输入组件英文名', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model.trim="form.enName"
            clearable
            placeholder="请输入组件英文名"
            @input="(value) => (form.enName = value.replace(/[^a-zA-Z]/g, ''))"
          />
        </el-form-item>
        <div class="titleClass">组件接收参数:</div>
        <div class="bigbox">
          <div
            v-for="(item, index) in form.inParams"
            :key="index"
            class="commonClass"
          >
            <el-form-item label="参数类型:" required>
              <el-select v-model="item.type" placeholder="请选择参数类型">
                <el-option
                  v-for="item in leixingLists"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="参数名"
              :prop="`inParams.${index}.name`"
              :rules="[
                { required: true, message: '请输入参数名', trigger: 'blur' },
              ]"
            >
              <el-input
                v-model.trim="item.name"
                clearable
                placeholder="请输入参数名"
              />
            </el-form-item>
            <div>
              <el-form-item
                label="备注"
                :prop="`inParams.${index}.desc`"
                :rules="[
                  { required: true, message: '请输入备注', trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model.trim="item.desc"
                  clearable
                  placeholder="请输入备注"
                />
              </el-form-item>
              <i
                class="el-icon-circle-plus"
                style="
                  font-size: 20px;
                  color: #409eff;
                  cursor: pointer;
                  margin-top: 5px;
                "
                @click="handleAdd1"
              ></i>
              <i
                class="el-icon-remove"
                style="
                  font-size: 20px;
                  color: #409eff;
                  cursor: pointer;
                  margin-top: 5px;
                "
                @click="handleReduce1(index)"
              ></i>
            </div>
          </div>
        </div>
        <div class="titleClass" style="margin-top: 15px">更新字段:</div>
        <div class="bigbox">
          <div
            v-for="(item, index) in form.updateColumnValue"
            :key="index"
            class="commonClass"
          >
            <el-form-item
              label="字段:"
              :prop="`updateColumnValue.${index}.columnName`"
              :rules="commonRules(fieldLists)"
              class="common_Style"
            >
              <myElAutocomplete
                :form="item"
                attributeName="columnName"
                :seleteLists="fieldLists"
                valuekey="Label_Desc"
                placeholder="请选择字段"
              />
            </el-form-item>
            <div>
              <el-form-item
                label="目标值"
                :prop="`updateColumnValue.${index}.columnValue`"
                :rules="[
                  {
                    required: true,
                    message: '请选择目标值',
                    trigger: 'change',
                  },
                ]"
              >
                <el-select
                  v-model="item.columnValue"
                  placeholder="请选择目标值"
                >
                  <el-option
                    v-for="(item, index) in targetLists"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <i
                class="el-icon-circle-plus"
                style="
                  font-size: 20px;
                  color: #409eff;
                  cursor: pointer;
                  margin-top: 5px;
                "
                @click="handleAdd3"
              ></i>
              <i
                class="el-icon-remove"
                style="
                  font-size: 20px;
                  color: #409eff;
                  cursor: pointer;
                  margin-top: 5px;
                "
                @click="handleReduce3(index)"
              ></i>
            </div>
          </div>
        </div>
        <div class="titleClass" style="margin-top: 15px">更新条件:</div>
        <div class="bigbox">
          <div
            v-for="(item, index) in form.condition"
            :key="index"
            class="commonClass"
          >
            <el-form-item
              label="字段:"
              :prop="`condition.${index}.columnName`"
              :rules="commonRules(fieldLists)"
              class="common_Style"
            >
              <myElAutocomplete
                :form="item"
                attributeName="columnName"
                :seleteLists="fieldLists"
                valuekey="Label_Desc"
                placeholder="请选择字段"
              />
            </el-form-item>
            <el-form-item label="关系" required>
              <el-select
                v-model="item.sqlCompareSignIndex"
                placeholder="请选择字段"
              >
                <el-option
                  v-for="item in relationLists"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="目标值"
              :prop="`condition.${index}.targetParamName`"
              :rules="[
                { required: true, message: '请选择目标值', trigger: 'change' },
              ]"
            >
              <el-select
                v-model="item.targetParamName"
                placeholder="请选择目标值"
              >
                <el-option
                  v-for="(item, index1) in targetLists"
                  :key="index1"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <div>
              <el-form-item label="与下一个条关系" required>
                <el-select
                  v-model="item.nextCondition"
                  placeholder="请选择与下一个条关系"
                  :disabled="index === form.condition.length - 1"
                >
                  <el-option
                    v-for="item in NextLists"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <i
                class="el-icon-circle-plus"
                style="
                  font-size: 20px;
                  color: #409eff;
                  cursor: pointer;
                  margin-top: 5px;
                "
                @click="handleAdd2"
              ></i>
              <i
                class="el-icon-remove"
                style="
                  font-size: 20px;
                  color: #409eff;
                  cursor: pointer;
                  margin-top: 5px;
                "
                @click="handleReduce2(index)"
              ></i>
            </div>
          </div>
        </div>

        <el-form-item label="查询返回类型:" required style="margin-top: 10px">
          <el-select v-model="form.returnType" placeholder>
            <el-option
              v-for="item in returnTypeLists"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <div class="classCenter">
          <el-button class="filter-item" type="primary" @click="handleSave"
            >保存</el-button
          >
          <el-button
            class="filter-item"
            style="margin-left: 10px"
            type="primary"
            v-show="editDate"
            @click="handlecancle(false)"
            >取消</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  projectdatebaseLists,
  projectcustomUpdate,
  findCanUseVo,
} from "@/api/lowcode";
import myElAutocomplete from "../commonComponents/myElAutocomplete.vue";
export default {
  name: "customUpdates",
  components: { myElAutocomplete },
  props: ["editDate"],
  data() {
    return {
      // 筛选框的 form 表单
      form: {
        _tableName_: "",
        tableName: "",
        enName: "",
        inParams: [
          {
            type: "String",
          },
        ],
        updateColumnValue: [{}],
        condition: [
          {
            sqlCompareSignIndex: 1,
            nextCondition: "none",
          },
        ],
        returnType: "",
      },
      tableKey: 0,
      list: [], // 表格数据
      total: 0, // 总条数
      listLoading: true, // 表格加载数据时的 loading
      NextLists: [
        {
          name: "or",
        },
        {
          name: "and",
        },
      ],
      leixingLists: ["String", "int"],
      relationLists: [
        {
          code: 1,
          label: "等于",
        },
        {
          code: 2,
          label: "不等于",
        },
        {
          code: 3,
          label: "在集合",
        },
        {
          code: 4,
          label: "不在集合",
        },
        {
          code: 5,
          label: "大于",
        },
        {
          code: 6,
          label: "大于等于",
        },
        {
          code: 7,
          label: "小于",
        },
        {
          code: 8,
          label: "小于等于",
        },
        {
          code: 9,
          label: "like%",
        },
        {
          code: 10,
          label: "%like",
        },
        {
          code: 11,
          label: "like",
        },
      ],
      fieldLists: [],
      importanceOptions: [],
      typeLists: [
        {
          code: 1,
          name: "查询",
        },
        {
          code: 2,
          name: "更新",
        },
        {
          code: 3,
          name: "删除",
        },
      ],
      returnTypeLists: ["BOOLEAN"],
    };
  },
  async created() {
    await this.projectdatebaseLists();
    // 编辑
    if (this.editDate) {
      this.form = this.editDate;
      let obj = this.importanceOptions.find(
        (item) => item.className === this.form.tableName
      );
      if (obj) {
        this.$set(this.form, "_tableName_", obj.Label_Desc);
        this.fieldLists = obj.classAttributes
          ? JSON.parse(obj.classAttributes).map((item) => ({
              Label_Desc: item.name,
            }))
          : [];
      } else {
        this.$set(this.form, "_tableName_", this.form.tableName);
        this.fieldLists = [];
      }
    } else {
      this.form.returnType = this.returnTypeLists[0];
    }
  },
  computed: {
    targetLists() {
      return this.form.inParams.map((item) => item.name);
    },
  },
  methods: {
    handleBASICstrparam(val) {
      this.form.updateColumnValue.forEach((item) => {
        this.$set(item, "columnName", "");
      });
      this.form.condition.forEach((item) => {
        this.$set(item, "columnName", "");
      });
      let obj = this.importanceOptions.find((item) => item.Label_Desc === val);
      if (obj) {
        this.form.tableName = obj.className;
        this.fieldLists = obj.classAttributes
          ? JSON.parse(obj.classAttributes).map((item) => ({
              Label_Desc: item.name,
            }))
          : [];
      } else {
        this.fieldLists = [];
        this.form.tableName = val;
      }
    },
    handleAdd1() {
      this.form.inParams.push({
        type: "String",
      });
    },
    handleReduce1(index) {
      if (this.form.inParams.length > 1) {
        this.form.inParams.splice(index, 1);
      }
    },
    handleAdd2() {
      this.form.condition.forEach((item) => {
        if (item.nextCondition === "none") {
          item.nextCondition = "or";
        }
      });
      this.form.condition.push({
        sqlCompareSignIndex: 1,
        nextCondition: "none",
      });
    },
    handleReduce2(index) {
      if (this.form.condition.length > 1) {
        this.form.condition.splice(index, 1);
      }
      this.form.condition[this.form.condition.length - 1].nextCondition =
        "none";
    },
    handleAdd3() {
      this.form.updateColumnValue.push({});
    },

    handleReduce3(index) {
      if (this.form.updateColumnValue.length > 1) {
        this.form.updateColumnValue.splice(index, 1);
      }
    },
    async projectdatebaseLists() {
      this.importanceOptions = [];
      const res = await projectdatebaseLists(
        +sessionStorage.getItem("developLowCodeId")
      );
      if (res?.code === 200) {
        this.importanceOptions = res.data;
        this.importanceOptions.forEach((item) => {
          this.$set(
            item,
            "Label_Desc",
            item.classDesc
              ? `${item.className} | ${item.classDesc}`
              : item.className
          );
        });
      }
    },
    handlecancle(flag) {
      if (this.editDate) {
        this.$emit("close", flag);
      } else {
        this.$parent.$parent.$parent.handledTableBtnSave(
          "数据库更新组件",
          "数据库操作组件列表",
          "customComponents"
        );
      }
    },
    handleSave() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const res = await projectcustomUpdate({
            ...this.form,
            projectId: +sessionStorage.getItem("developLowCodeId"),
          });
          if (res?.code === 200) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.handlecancle(true);
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/layout-table.scss";
$rowLength: 2;
@media all and (min-width: 1659px) {
  $rowLength: 2;
  @include calculation($rowLength: $rowLength);
}
@media all and (max-width: 1659px) {
  $rowLength: 3;
  @include calculation($rowLength: $rowLength);
}
.titleClass {
  margin-bottom: 10px;
  color: #5a5e66;
  font-weight: 700;
}
.bigbox {
  border: 1px solid #ccc;
  padding-top: 15px;
}
.classCenter {
  display: flex;
  justify-content: center;
}
.commonClass {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
</style>
